<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        div           元素
        class="box"   属性(写在标签内 和标签名以一个空格分隔的叫做属性(属性名="属性值") 可以没有,也可以有多个,多个之前用空格分隔)

        自定义属性 (HTML5新增 )
           允许用于按照自己的需求 自定义属性 -> 可以在标签名内存储一些信息
        
        如何自定义属性
           a. (官方)自定义属性一般以 "data-"开头  后面接属性名和属性值 (data-属性名="属性值")
           b. 也可以不用data-开头  直接自定义属性名和属性值
     -->
    <div id="box" class="one two three" data-msg="你好" asd="asd">
        <!-- 123123 -->
    </div>
</body>
<script>

    // 所有的节点都是对象类型
    
    // 属性节点 依存于 元素节点  => 获取属性节点之前 先获取元素节点

    // 1. 获取元素节点
    var box = document.querySelector("#box"); 
    // console.log(box,typeof box);

    // Element.getAttribute(attrName)   对应属性名获取属性值  => 存在该属性:返回属性值 不存在:null
    // Element.setAttribute(attrName,attrValue)   对应属性名设置属性值 (没有就新增 有就修改)
    // Element.removeAttribute(attrName)   对应属性名删除属性

    // 除了获取 设置  修改 删除 官方属性以外,还可以操作用户自定义属性!!

    // 获取
    var msg = box.getAttribute("data-msg");
    console.log(msg);

    var asd = box.getAttribute("asd");
    console.log(asd);

    // 设置
    box.setAttribute("data-msg","Are you ok?")
    box.setAttribute("data-index",0);
    box.setAttribute("asd","zxc");
    
    // 删除
    box.removeAttribute("data-msg")
    box.removeAttribute("data-index");
    box.removeAttribute("asd");
    
    
    console.log(box);
    
    

</script>
</html>